@charset "utf-8";
/* CSS Document */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align: baseline;
	background:transparent;
}
body {
	line-height: 1;
	font-family: Helvetica, "Microsoft YaHei";
	-webkit-text-size-adjust: none;
	color:#4b4b4b;
	font-size:14px;
	cursor:url(../images/mouse.png),pointer;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: ''; /*content:none;*/
}
a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	text-decoration:none;
}
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
mark {
	background-color: #ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted #000;
	cursor:help;
}
table {
	border-collapse: collapse;
	border-spacing:  0;
}
hr {
	display:block;
	height:1px;
	border:0;
	border-top: 1px solid #cccccc;
	margin:1em 0;
	padding:0;
}
/*调试*/
.border{
	border:1px solid red;
}
.border2{
	border:1px solid gray;
}
@-webkit-keyframes rollShake {
    0% {
       -webkit-transform:rotate(0deg); 
    }
    100% {
       -webkit-transform:rotate(360deg); 

    }
}
@-webkit-keyframes pop {
    0% {
       -webkit-transform:scale(1); 
    }
    100% {
       -webkit-transform:scale(0.9); 

    }
}

/*正文*/
.view{
	display:-webkit-box;
	position:relative;
	margin:5px;
	min-width:800px;
	/*background:url(../images/main_bg.png) no-repeat;*/
}
.start{
	width:800px;
	height:600px;
	background:url(../images/start_bg.png) no-repeat;
	position:absolute;
	left: 0;
	top: 0;
}
.start .icon{
	background:url(../images/roll.png);
	width:43px;
	height:41px;
	position:absolute;
	left:240px;
	top:280px;
	-webkit-animation-name: rollShake;
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
.start .btn{
	background:url(../images/btn_start.png);
	width:144px;
	height:110px;
	position:absolute;
	left:380px;
	top:420px;
}
.start a:hover{
	-webkit-animation-name: pop;
    -webkit-animation-duration:0.6s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate
}
.result{
	width:800px;
	height:600px;
	position:absolute;
	left: 0;
	top: 0;
}
.result .btn{
	background:url(../images/play_again.png);
	width:144px;
	height:110px;
	position:absolute;
	left:560px;
	top:220px;
}
.win{
	background:url(../images/big_win.png) no-repeat;
}
.lost{
	background:url(../images/big_lost.png) no-repeat;
}
.main{
	width:600px;
	height:600px;
}
.main > div{
	position:absolute;
	display:none;
}
.main > canvas{
	position:absolute;
	top:0;
	left:0;
}
.main .cp{
	top:10px;
	left:120px;
}
.main .up{
	bottom:100px;
	left:120px;
}
.main .roll{
	
}
.main .roll-select{
	top:435px;
	left:0px;
	width:600px;
	height:165px;
	background-color:rgba(0,0,0,0.5);
}
.main .roll-select span{
	position:absolute;
	top:-5px;
	width:32px;
	height:32px;
	display:none;
}
.main .roll-select ul {
	display:-webkit-box;
	width:325px;
	margin-top:30px;
	margin-left:190px;
}
.main .roll-select li {
	-webkit-box-flex: 1;
	height:48px;
	width:48px;
	background:no-repeat;
	text-align:center;
}
.main .roll-select .btn-box{
	height:40px;
	margin-left: 230px;
	margin-top: 10px;
}
.main .roll-select .btn-box a{
	width:88px;
	height:68px;
	margin-left: 20px;
	display:inline-block;
}
.main .say{
	background:#EFE;
	-webkit-border-radius:5px;
	border:1px solid #333;
	max-width:300px;
	padding:10px;
	line-height: 150%;
	font-size:16px;
}
.main .say img{
	width:18px;
}
.main .mask{
	width:600px;
	height:600px;
	background-color:rgba(0,0,0,0.7);
}
.record{
	height:600px;
	-webkit-box-flex: 1;
	background:#000;/*url(../images/record_bg.png);*/
	color:#FFF;
}
.record ul{
	height:259px;
	overflow-y:scroll;
	font-size:16px;
}
.record li{
	margin:5px;
}
.record p{
	display:inline;
}
.record a{
	display:inline-block;
}
.record img{
	width:18px;
}